<template>
  <div>
    <ListItem :data="list">
      <template #title>
        <p>本周热搜 TOP5</p>
      </template>

      <template #default="{ item }">
        <div class="left">
          <span class="top5">{{ item.name }}</span>
        </div>
        <div class="right">
          <span class="like">🔥 {{ item.hotNum }}</span>
        </div>
      </template>
    </ListItem>

    <ListItem :data="list2">
      <template #title>
        <p>可能感兴趣的人</p>
      </template>

      <template #default="{ item }">
        <div class="left">
          <div class="info">
            <h3 class="name">{{ item.name }}</h3>
            <span class="sex">♂</span>
            <span class="age">{{ item.age }}岁</span>
          </div>
          <div class="line2">{{ item.school }}</div>
          <div class="line3">{{ item.honour }}</div>
        </div>
        <div class="right">
          <button>＋ 关注</button>
        </div>
      </template>
    </ListItem>
  </div>
</template>

<script>
import ListItem from './components/ListItrm'
export default {
  components: {
    ListItem
  },
  data() {
    return {
      list: [
        {
          id: 1,
          name: "区块链1",
          hotNum: 82,
        },
        {
          id: 2,
          name: "区块链2",
          hotNum: 12,
        },
        {
          id: 3,
          name: "区块链3",
          hotNum: 823,
        },
        {
          id: 4,
          name: "区块链4",
          hotNum: 12,
        },
        {
          id: 5,
          name: "区块链5",
          hotNum: 43,
        },
        {
          id: 6,
          name: "区块链6",
          hotNum: 75,
        },
      ],
      list2: [
        {
          id: 1,
          name: "苏轼",
          age: 52,
          major: "机电一体化技术",
          school: "合肥科技大学",
          honour: "教授1",
        },
        {
          id: 2,
          name: "苏轼2",
          age: 52,
          major: "机电一体化技术2",
          school: "合肥科技大学2",
          honour: "教授2",
        },
        {
          id: 3,
          name: "苏轼3",
          age: 523,
          major: "机电一体化技术3",
          school: "合肥科技大学3",
          honour: "教授3",
        },
        {
          id: 4,
          name: "苏轼4",
          age: 52,
          major: "机电一体化技术4",
          school: "合肥科技大学4",
          honour: "教授4",
        },
      ],
    };
  },
}
</script>

<style lang="less" scoped>
.left {
  span.top5 {
    line-height: 40px;
    background-color: #f2f4f6;
    padding: 2px 5px;
  }

  .info {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    line-height: 45px;

    h3.name {
      margin: 0;
      padding: 0;
    }

    .sex {
      color: #3fc0f7;
      padding: 0 5px;
      transform: rotate(45deg);
      font-weight: bold;
    }

    .age {
      font-size: 14px;
    }
  }

  .line2,
  .line3 {
    padding: 3px 0;
    font-size: 14px;
  }
}

.right {
  .like {
    line-height: 40px;
  }

  button {
    border-radius: 13px;
    padding: 5px 10px;
    border: 0 none;
    outline: none;
    background: #3a7cf6;
    color: #edf2f3;
    margin-top: 15px;

  }
}
</style>